<template>
	<view>
		<navbar title="设置" />
		<view class="setting-head setting-card v-details-card border-box ">
			<view class="item flex justify-content_space-between align-item_center relative">
				<button class="absolute openType" open-type="chooseAvatar" @chooseavatar="chooseavatar">获取手机号</button>
				<view class="item-left">头像</view>
				<view class="item-right flex align-item_center">
					<image v-if="user.info.avatar" class="avatar" :src="user.info.avatar" />
					<image v-else class="avatar" src="https://mall-admin.xinjiafu.net/mini-static/images/common/0.png" />
					<image class="icon-right" src="https://mall-admin.xinjiafu.net/mini-static/images/user/0.png" />
				</view>
			</view>
			<view class="item flex justify-content_space-between align-item_center relative" @click="setNickname">
				<view class="item-left">昵称</view>
				<view class="item-right flex align-item_center">
					<view class="ds">{{user.info.nickname}}</view>
					<image class="icon-right" src="https://mall-admin.xinjiafu.net/mini-static/images/user/0.png" />
				</view>
			</view>
			<view class="item flex justify-content_space-between align-item_center relative">
				<button class="absolute openType" open-type="getPhoneNumber" @getphonenumber="getphonenumber">获取手机号</button>
				<view class="item-left">手机号</view>
				<view class="item-right flex align-item_center">
					<view class="ds">{{user.info.mobile}}</view>
					<image class="icon-right" src="https://mall-admin.xinjiafu.net/mini-static/images/user/0.png" />
				</view>
			</view>
			<view class="item flex justify-content_space-between align-item_center" @click="address">
				<view class="item-left">地址</view>
				<view class="item-right flex align-item_center">
					<image class="icon-right" src="https://mall-admin.xinjiafu.net/mini-static/images/user/0.png" />
				</view>
			</view>
			<view class="item flex justify-content_space-between align-item_center" @click="collect">
				<view class="item-left">我的收藏</view>
				<view class="item-right flex align-item_center">
					<image class="icon-right" src="https://mall-admin.xinjiafu.net/mini-static/images/user/0.png" />
				</view>
			</view>
		</view>

		<view class="setting-points setting-card v-details-card border-box">
			<view class="item flex justify-content_space-between align-item_center" @click="order(4)">
				<view class="item-left">订单详情（积分）</view>
				<view class="item-right flex align-item_center">
					<image class="icon-right" src="https://mall-admin.xinjiafu.net/mini-static/images/user/0.png" />
				</view>
			</view>
			<view class="item flex justify-content_space-between align-item_center" @click="order(0)">
				<view class="item-left">订单详情（家政）</view>
				<view class="item-right flex align-item_center">
					<image class="icon-right" src="https://mall-admin.xinjiafu.net/mini-static/images/user/0.png" />
				</view>
			</view>
		</view>

		<view class="setting-points setting-card v-details-card border-box">
			<view class="item flex justify-content_space-between align-item_center" @click="agreement(3)">
				<view class="item-left">隐私协议</view>
				<view class="item-right flex align-item_center">
					<image class="icon-right" src="https://mall-admin.xinjiafu.net/mini-static/images/user/0.png" />
				</view>
			</view>
			<view class="item flex justify-content_space-between align-item_center" @click="agreement(2)">
				<view class="item-left">用户协议</view>
				<view class="item-right flex align-item_center">
					<image class="icon-right" src="https://mall-admin.xinjiafu.net/mini-static/images/user/0.png" />
				</view>
			</view>
		</view>

		<!-- <view class="setting-out setting-card v-details-card border-box">
			<view class="item flex justify-content_space-between align-item_center">
				<view class="item-left">注销账号</view>
				<view class="item-right flex align-item_center">
					<view class="ds">注销后无法恢复</view>
					<image class="icon-right" src="https://mall-admin.xinjiafu.net/mini-static/images/user/0.png" />
				</view>
			</view>
		</view> -->

		<view class="setting-quit">退出登录</view>
		<u-gap height="120rpx"></u-gap>

		<up-popup :show="nickname.show" @close="nicknameClose" round="18rpx" mode="center" closeable>
			<view class="nicknameBox border-box">
				<input type="nickname" placeholder="请输入昵称" @input="nicknameInput" @confirm="nicknameConfirm" maxlength="16" />
				<view class="confirm" @click="nicknameConfirm">确认</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import navbar from "@/components/navbar.vue"
	import {
		navigateTo
	} from "@/utils/tool";
	import {
		reactive
	} from "vue"
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import userApi from "@/api/member/user.js"
	import FileApi from "@/sheep/api/infra/file.js"

	const agreement = (type) => {
		navigateTo("/user/agreement/index?type=" + type)
	}

	const nicknameInput = (val) => {
		nickname.name = val.detail.value
	}

	const nicknameConfirm = (val) => {
		if (!nickname.name.trim()) return;
		userUpdate({
			nickname: nickname.name
		})
	}
	const nicknameClose = () => {
		nickname.name = ""
		nickname.show = false;
	}
	const setNickname = () => {
		nickname.show = true;
	}
	const nickname = reactive({
		show: false,
		name: ""
	})

	// 更新
	const userUpdate = (data) => {
		userApi.update(data).then((res) => {
			if (res.code === 0) {
				userGet()
				nicknameClose()
			}
		})
	}

	// 头像
	const chooseavatar = (val) => {
		FileApi.uploadFile(val.detail.avatarUrl).then(res => {
			if (res.code === 0) {
				userUpdate({
					avatar: res.data
				})
			}
		})
	}

	// 更新手机号
	const getphonenumber = (val) => {
		if (val.detail.errMsg === "getPhoneNumber:ok") {
			userApi.updateMobileByWeiXin({
				code: val.detail.code
			}).then(res => {
				if (res.code === 0) userGet()
			})
		}
	}

	const order = (type) => {
		navigateTo("/user/order/index?type=" + type)
	}

	const collect = () => {
		navigateTo("/user/setting_collect/index")
	}

	const address = () => {
		navigateTo("/user/setting_address/index")
	}

	const user = reactive({
		info: {
			point: 0,
			avatar: "",
			nickname: "",
			mobile: ""
		}
	})

	const userGet = () => {
		userApi.get().then(res => {
			if (res.code === 0) {
				user.info = res.data;
			}
		})
	}

	onLoad(() => {
		userGet()
	})
</script>

<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.nicknameBox {
		padding: 80rpx 30rpx 60rpx;
		border-radius: 18rpx 18rpx 0 0;
		background-color: #F8F3E7;

		.confirm {
			margin: 50rpx auto 0;
			width: 360rpx;
			height: 86rpx;
			line-height: 86rpx;
			opacity: 1;
			border-radius: 100rpx;
			border: 2rpx solid #A72530;
			background-color: #A72530;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			color: #fff;
		}

		input {
			width: 550rpx;
			background-color: #EDE2CD;
			padding: 10rpx 20rpx;
			$h: 60rpx;
			height: $h;
			line-height: $h;
			border-radius: $h;
		}
	}

	.setting-quit {
		margin: 70rpx auto 0;
		width: 710rpx;
		height: 86rpx;
		line-height: 86rpx;
		opacity: 1;
		border-radius: 100rpx;
		border: 2rpx solid #A72530;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		color: rgba(167, 37, 48, 1);
	}

	.setting-out {
		margin: 88rpx auto 0;
	}

	.setting-points {
		margin: 32rpx auto;
	}

	.setting-head {
		margin: 20rpx auto;
		padding: 36rpx !important;
	}

	.setting-card {
		padding: 28rpx 36rpx;

		.item:not(:first-child) {
			margin-top: 48rpx;
		}

		.item {
			.openType {
				width: 100%;
				height: 100%;
				opacity: 0;
			}

			&-right {
				.icon-right {
					width: 12rpx;
					height: 24rpx;
					margin-left: 24rpx;
				}

				.avatar {
					width: 58rpx;
					height: 58rpx;
					border-radius: 58rpx;
				}
			}

			&-left {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(64, 3, 3, 1);
			}
		}
	}
</style>